<template>
  <div id="SceneView">
    <div id="mapView"></div>
    <div id="btns">
      <button id="showHeatMap" @click="showHeatMap">出来吧！热力图</button>
      <button id="removeHeatMap" @click="removeHeatmap">滚蛋吧！热力图</button>
    </div>
  </div>
</template>

<script>
import InitArcGisJs from "../utils/loadGisModules";
import HeatMap from "../utils/heatMap";
import heatData from "../assets/mockData/heatData";
export default {
  name: "trackMobile",
  data() {
    return {
      ARCGIS: {}, //arcgis模块
      view: {},
      heatMapLayer: null //热力图图层
    };
  },
  async created() {
    this.ARCGIS = await InitArcGisJs.init();
    let { Map, TileLayer, SceneView } = this.ARCGIS;
    const map = new Map();
    this.map = map;
    // 创建地图实例map
    this.view = new SceneView({
      container: "mapView",
      map: this.map,
      qualityProfile: "high"
    });
    var tiledUrl =
      "https://map.geoq.cn/ArcGIS/rest/services/ChinaOnlineCommunity/MapServer";
    var tiledLayer = new TileLayer({ url: tiledUrl });
    this.map.add(tiledLayer);
    this.view.on("click", event => {
      var screenPoint = {
        //当前点击的经纬度
        x: event.x,
        y: event.y
      };
      this.view.hitTest(screenPoint).then(function(response) {
        console.log(response);
        if (response.results.length > 0 && response.results[0].graphic) {
          console.log("这是当前点击的点位信息", response.results);
        }
      });
    });
    this.view
      .when(
        () => {
          // 地图加载完成
          setTimeout(() => {
            this.view.goTo({
              // 视角切换动画
              center: [121.45897884146042, 31.246522700030482], //终点坐标
              heading: 360, // 面向正南
              z: 10000,
              tilt: 0, //视图角度cos
              zoom: 13 //放大等级
            });
          }, 1000);
          // 撒点动态图
        },
        function(error) {
          console.error(error);
          alert("加载失败,稍后重新加载");
          window.reload();
        }
      )
      .then(this.mapInitFinish);
  },
  mounted() {},
  methods: {
    mapInitFinish() {
      console.log("地图初始化完成");
    },
    showHeatMap() {
      if (this.heatMapLayer) {
        console.log("已经存在了呢");
        return;
      }
      this.heatMapLayer = HeatMap(this.view, this.ARCGIS);
      this.heatMapLayer.addPoint(heatData);
      this.heatMapLayer.freshenLayer(); //添加热力之后刷新一次 去掉模糊点
    },
    removeHeatmap() {
      this.heatMapLayer.removeCanvas();
      this.heatMapLayer = null;
    }
  }
};
</script>

<style>
@import "https://js.arcgis.com/4.20/esri/css/main.css";
html,
body,
#mapView {
  padding: 0;
  margin: 0;
  height: 100%;
  width: 100%;
}
#SceneView {
  position: absolute;
  width: 100%;
  height: 100%;
}
.esri-component.esri-attribution.esri-widget {
  display: none;
}

#btns {
  position: absolute;
  bottom: 10px;
  width: 100%;
  z-index: 1;
  text-align: center;
  cursor: pointer;
}

#showHeatMap,
#removeHeatMap {
  padding: 10px;
  border: 1px solid red;
  color: red;
}

#showHeatMap:hover,
#removeHeatMap:hover {
  background: red;
  color: white;
}
</style>
